<template>
    <div class="ele-body">
      <div class="block-interval">
        <a-card :bordered="false">
          <a-form layout="inline" :model="where">
            <a-row>
              <a-form-item class="ele-text-center">
                <a-space>
                  <a-button type="primary" @click="reload">查询</a-button>
                  <a-button @click="reset">重置</a-button>
                </a-space>
              </a-form-item>
            </a-row>
          </a-form>
        </a-card>
      </div>


      <!-- 表格 -->
      <div>
        <a-card :bordered="false" class="table-height">
          <BasicTable
            :canResize="false"
            ref="tableRef"
            :api="DeviceConnectApi.findPage"
            :where="where"
            :columns="columns"
            showTableSetting
            :rowSelection="{
              type: 'checkbox',
              selectedRowKeys: checkedKeys,
            }"
          >
          <!-- table上边工具栏 -->
            <template #toolbar>
              <a-space>
                <a-button type="primary" @click="openEdit()">
                  <template #icon>
                    <plus-outlined />
                  </template>
                  <span>新建</span>
                </a-button>
              </a-space>
            </template>

          <template #bodyCell="{ column, record }">
              <!-- table操作栏按钮 -->
              <template v-if="column.key === 'action'">
                <a-space>
                  <a @click="openEdit(record)">修改</a>
                  <a-divider type="vertical" />
                  <a-popconfirm title="确定要删除此记录吗？" @confirm="remove(record)">
                    <a class="ele-text-danger">删除</a>
                  </a-popconfirm>
                </a-space>
              </template>
            </template>
          </BasicTable>
        </a-card>
      </div>

    <!-- 编辑弹窗 -->
      <devopsDoHostMachine-edit v-model:visible="showEdit" :data="current" @done="reload" />
    </div>
</template>

<script lang="ts" setup>
import { message } from 'ant-design-vue';
import { reactive, ref } from 'vue';
import { BasicTable } from '/@/components/Table';
import { PlusOutlined } from '@ant-design/icons-vue';
import { DeviceConnectApi } from '/@/api/system/operation/DeviceConnectApi';
import DeviceConnectEdit from './device_connect_edit.vue';

const where = reactive({
  timerName: '',
  jobStatus: '',
});

const columns = ref<string[]>([
  {
    title: '设备名称',
    dataIndex: 'deviceName'
  },
  {
    title: '设备类型',
    dataIndex: 'deviceType'
  },
  {
    title: '设备状态',
    dataIndex: 'deviceStatus'
  },
  {
    title: '连接类型',
    dataIndex: 'linkType'
  },
    {
    title: '设备IP',
    dataIndex: 'deviceIp'
  },
]);


const checkedKeys = ref<Array<string | number>>([]);

const current = ref<any>(null);

const showEdit = ref<boolean>(false);

const tableRef = ref(null); 

const reload = () => {
  checkedKeys.value = [];
  tableRef.value.reload({ page: 1 });
};

const reset = () => {
  where.timerName = '';
  where.jobStatus = '';
  reload();
};


</script>
